<template>
    <div>
        <router-view/>
        <ul>
            <li>
                <router-link to="/">
                    首页
                </router-link>
            </li>
            <li>
                <router-link to="/order">
                    发现
                </router-link>
            </li>
            <li>订单</li>
            <li>我的</li>

        </ul>
    </div>
</template>
<script>
    import {reactive,toRefs,computed,watch,onMounted} from 'vue';
    export default {
        setup:function () {
            const state = new reactive({
                id:255,
                j:computed(()=>{
                    return state.id++;
                })
            });
            watch(()=>{
                console.log(state.id)
            });
            onMounted(()=>{

            });
            function change() {
                state.id++;

                console.log(state);
            }
            return {
                ...toRefs(state),
                change
            };

        }
    }
</script>
<style>
    ul li{
        display: inline;

    }
</style>
